<template>
  <div class="zl">
    <div class="overview w100">
      <div class="header space-between align-center">
        <div class="flex align-center">
          <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang3_f8f39a01722849fbb749aefb25d9c755.png'" class="img" />
          <div class="name">总览</div>
        </div>
        <img
          v-show="show"
          @click="handleClick"
          :src="imgUrl + '/profile/personinfo/2023/6/20/lang2_d966d366dae5476a8e6889b30b1b8c82.png'"
          class="img1"
        />
      </div>
      <div class="list space-between">
        <div class="list-width">
          <div>农田总面积</div>
          <div class="list-bg w100 space-between align-center">{{ Number(info.val3).toFixed(2) || 0 }}亩</div>
        </div>
        <div class="list-width">
          <div>承包家庭总数</div>
          <div class="list-bg w100 space-between align-center">{{ info.val4 || 0 }} 户</div>
        </div>
        <div class="list-width">
          <div>经营户总数</div>
          <div class="list-bg w100 space-between align-center">{{ info.val5 || 0 }} 个</div>
        </div>
        <div class="list-width">
          <div>流转农田面积</div>
          <div class="list-bg w100 space-between align-center">{{ Number(info.val6).toFixed(2) || 0 }} 亩</div>
        </div>
      </div>

      <div class="shaped w100 flex align-center">
        <div class="round tac w50">
          <el-progress
            type="circle"
            :width="120"
            define-back-color="#012B59"
            color="#11B3F9"
            :percentage="Number(info.val7 || 0)"
          ></el-progress>
          <div>农田种植率</div>
        </div>
        <div class="round tac w50">
          <el-progress
            type="circle"
            text-color="#11B3F9"
            :width="120"
            define-back-color="#012B59"
            color="#11B3F9"
            :percentage="Number(info.val8 || 0)"
          ></el-progress>
          <div>流转种植率</div>
        </div>
      </div>
      <img
        :src="imgUrl + '/profile/personinfo/2023/6/20/lang4_73a1fc1e81c446e5894ac4101272c833.png'"
        class="img2 w100"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Zl',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API
    }
  },
  methods: {
    handleClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.zl {
  width: 7rem;
  //height: 4.16rem;
  height: calc((100vh - 1.2rem) / 3);

  .header {
    width: 100%;
    background-size: 100% 100%;
    font-size: 0.18rem;
    height: 0.42rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang7_a953852ebaf143d2994fe879e106efda.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;

    .img {
      width: 0.16rem;
      height: 0.14rem;
      margin-left: 0.1rem;
      margin-right: 0.15rem;
    }

    .img1 {
      width: 0.36rem;
      height: 0.16rem;
      margin-right: 0.1rem;
    }
  }

  .overview {
    //height: 4.16rem;
    height: calc((100vh - 1.2rem) / 3);
    overflow-y: hidden;

    .shaped {
      height: 2.6rem;

      .round {
        //height: 100%;
        margin-top: 0.2rem;

        ::v-deep .el-progress__text {
          color: #00cdff;
          font-weight: bold;
        }
      }
    }

    .list {
      width: 90%;
      margin: 0.1rem auto;

      .list-width {
        width: 23%;
        font-size: 0.14rem;

        .list-bg {
          margin-top: 0.1rem;
          background-size: 100% 100%;
          font-size: 0.2rem;
          padding-left: 0.1rem;
          color: #00cdff;
          height: 0.43rem;
          background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang8_f7bfc9009903420bbf7db883a8bd4b80.png');
          background-repeat: no-repeat;
          background-position-x: center;
          box-sizing: border-box;
        }
      }

      .list-width1 {
        width: 32%;
        font-size: 0.14rem;
      }
    }
  }

  .img2 {
    height: 0.08rem;
  }
}
</style>